<template>
    <div id="main">
        <div class="mainTabPanel">
            <el-tabs
            v-model="editableTabsValue"
                type="card"
                editable
                class="demo-tabs"
                @edit="handleTabsEdit"
            >
                <el-tab-pane
                v-for="item in editableTabs"
                :key="item.name"
                :label="item.title"
                :name="item.name"
                >
                  <TabUI :index="tabIndex" @tab_name_change="tabNameChange"></TabUI>
                </el-tab-pane>
            </el-tabs>
        </div> 
    </div>
</template>

<script lang="ts" setup>
import { reactive, ref ,markRaw,provide } from 'vue';
import type { TabPaneName } from 'element-plus';
import TabUI from '@/MainViews/TabUI.vue';


let tabIndex = 1
const centerDialogVisible = ref(false)
provide('centerDialogVisible',centerDialogVisible)
const editableTabsValue = ref('1')
const editableTabs = ref([
  {
    title: 'New Tab',
    name: '1',
    content: 'Tab 1 content',
  },
])
const handleTabsEdit = (targetName: TabPaneName | undefined, action: 'remove' | 'add') => {
if (action === 'add') {
    centerDialogVisible.value=true
    const newTabName = `${++tabIndex}`
    editableTabs.value.push({
      title: 'New Tab',
      name: newTabName,
      content: 'New Tab content',
    })
    editableTabsValue.value = newTabName
} else if (action === 'remove') {
    const tabs = editableTabs.value
    let activeName = editableTabsValue.value
    if (activeName === targetName) {
      tabs.forEach((tab, index) => {
        if (tab.name === targetName) {
          const nextTab = tabs[index + 1] || tabs[index - 1]
          if (nextTab) {
            activeName = nextTab.name
          }
        }
      })
    }
    editableTabsValue.value = activeName
    editableTabs.value = tabs.filter((tab) => tab.name !== targetName)
  }
}
const tabNameChange =async (index,val)=>{
    console.log(index,val)
    const tabs = editableTabs.value
    tabs[index-1].title = val
}
</script>

<style scoped>
*{
  user-select: none;
  margin: 0;
  padding: 0;
}
#main{
    width: 100%;
    height: 100%;
}
.el-dialog__header {
    padding: 0;
    width: 0; 
    height: 0;
}
.el-dialog__headerbtn
{
    visibility: hidden;
    width: 0;
    height: 0;
}
.el-input {
    width: 120px;
}
.main-dialog >.el-dialog__body{
    padding: 0;
}
.main-dialog {
    display: flex;
    flex-direction: column;
    width: 800px;
    height: 650px;
}
.dialog-up{
    display: flex;
    width: 800px;
    height: 30px;
}
.dialog-up-left{
    width: 250px;
    height: 30px;
    font-size: 24px;
    text-align: center;
}
.dialog-up-right{
    width: 550px;
    height: 30px;
    font-size: 24px;
    text-align: center;
}
.dialog-down{
    display: flex;
    width: 800px;
    height: 520px;
    background: green;
}
.dialog-down-left{
    padding: 10px;
    width: 250px;
    height: 500px;
    background: gray;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.dialog-down-right{
    width: 550px;
    height: 520px;
    background: greenyellow;
    display: flex;
    flex-direction: column;
}
.port-setting{
    width: 550px;
    height: 620px;
    background: green;
}
.mainTabPanel{
    width: 95%;
    height: 100%;
    margin: 10px auto;
}
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
</style>